<template>
	<view>
		<view class="borderDiv">
			<!-- 表单组件 -->
			<uni-forms :modelValue="formData" ref="form" label-width="100px">
				<!-- 申请类型 -->
				<uni-forms-item label="申请类型：" name="applyWay">
					{{ formData.applyWay == 1 ? '填报转会' : '扫码转会' }}
				</uni-forms-item>
				<view class="line-bottom"></view>

				<!-- 姓名 -->
				<uni-forms-item label="姓名：" name="applyUserName">
					{{ formData.applyUserName }}
				</uni-forms-item>
				<view class="line-bottom"></view>

				<!-- 性别 -->
				<uni-forms-item label="性别：" name="sex" v-if="formData.applyIdCard">
					{{ getGenderFromIdCard }}
				</uni-forms-item>
				<view class="line-bottom"></view>

				<!-- 联系电话 -->
				<uni-forms-item label="联系电话：" name="applyPhone">
					{{ formData.applyPhone }}
				</uni-forms-item>
				<view class="line-bottom"></view>

				<!-- 身份证号码 -->
				<uni-forms-item label="身份证号码：" name="applyIdCard">
					{{ maskedIdCard }}
				</uni-forms-item>
			</uni-forms>
		</view>

		<view class="borderDiv">
			<!-- 表单组件 -->
			<uni-forms :modelValue="formData" ref="form" label-width="100px">
				<!-- 现工会 -->
				<uni-forms-item label="现工会：" name="nowUnionName">
					{{ formData.nowUnionName }}
				</uni-forms-item>
				<view class="line-bottom"></view>

				<!-- 现工作单位 -->
				<uni-forms-item label="现工作单位：" name="Currentemployer">
					{{ formData.Currentemployer }}
				</uni-forms-item>
				<view class="line-bottom"></view>

				<!-- 转入工作所在地 -->
				<uni-forms-item label="转入工作所在地：" name="workOrResidenceLocationStr">
					{{ formData.workOrResidenceLocationStr }}
				</uni-forms-item>
				<view class="line-bottom"></view>

				<!-- 转入工会 -->
				<uni-forms-item label="转入工会：" name="newUnionName">
					{{ formData.newUnionName }}
				</uni-forms-item>
				<view class="line-bottom"></view>

				<!-- 转入工作单位 -->
				<uni-forms-item label="转入工作单位：" name="newInstitution">
					{{ formData.newInstitution }}
				</uni-forms-item>
				<view class="line-bottom"></view>

				<!-- 转入理由 -->
				<uni-forms-item label="转入理由：" name="transferReason">
					{{ formData.transferReason }}
				</uni-forms-item>
			</uni-forms>
		</view>

		<!-- 审批意见 -->
		<uni-forms label-width="100px">
			<uni-forms-item label="审批意见：" name="opinion"
				>
				<view class="textBack">
					<textarea class="textarea" :disabled="!activeListStatus"
						v-model="formData.transferApprovalRecordsLog.approvalReason" placeholder=""
						@input="updateRemainingChars"></textarea>
					<text class="remaining-chars">{{ remainingChars }} </text>
				</view>
			</uni-forms-item>
		</uni-forms>

		<!-- 操作按钮 -->
		<view class="btn1 flex" v-if="activeListStatus">
			<button class="button1 flex1 margin20" :loading="buttonLoading" @click="handleReject">
				驳回
			</button>
			<button class="button flex1" :loading="buttonLoadings" @click="handleApprove">
				同意
			</button>
		</view>
	</view>
</template>

<script>
	import {
		getDictsList
	} from '../../api/system/dicts';
	import {
		CheckTheTransferDetailsPage,
		CheckTheTransferDetailsPageGetLog,
		updateApprovalStatusOptions
	} from '../../api/work/approvalmanagement';
	import {
		toast
	} from '../../utils/common';

	export default {
		data() {
			return {
				remainingChars: 200,
				buttonLoading: false,
				buttonLoadings: false,
				activeListStatus: true,
				formData: {
					transferApprovalRecordsLog: {
						approvalReason: ''
					}
				},
				politicalStatusOptions: [],
				jobTypeList: [],
				employmentTypeOptions: []
			};
		},

		onLoad(option) {
			if (!option.activeList) {
				this.loadData(option.id);
				this.activeListStatus = true;
			} else {
				this.activeListStatus = false;
				this.loadDataselectById(option.id);
			}
			this.getDictsListData();
		},

		methods: {
			updateRemainingChars() {
				const approvalReason = this.formData.transferApprovalRecordsLog?.approvalReason || '';
				this.remainingChars = 200 - approvalReason.length;
			},
			loadData(id) {
				CheckTheTransferDetailsPage(id)
					.then(res => {
						this.formData = {
							...this.formData,
							...res.data
						};
						if (!this.formData.transferApprovalRecordsLog) {
							this.formData.transferApprovalRecordsLog = {
								approvalReason: ''
							}
						}
					})
					.catch(err => {
						console.error(err);
					});
			},

			loadDataselectById(id) {
				CheckTheTransferDetailsPageGetLog(id)
					.then(res => {
						this.formData = res.data;
					})
					.catch(err => {
						console.error(err);
					});
			},

			getDictsListData() {
				getDictsList('political_status')
					.then(res => {
						this.politicalStatusOptions = res.data.map(item => ({
							...item,
							text: item.dictLabel,
							value: item.dictValue
						}));
					})
					.catch(err => {
						this.politicalStatusOptions = [];
						console.error(err);
					});

				getDictsList('job_type')
					.then(res => {
						this.jobTypeList = res.data.map(item => ({
							...item,
							text: item.dictLabel,
							value: item.dictValue
						}));
					})
					.catch(err => {
						console.error(err);
					});

				getDictsList('flexible_employment_type')
					.then(res => {
						this.employmentTypeOptions = res.data.map(item => ({
							...item,
							text: item.dictLabel,
							value: item.dictValue
						}));
					})
					.catch(err => {
						console.error(err);
					});
			},

			handleReject() {
				this.buttonLoading = true;
				this.formData.status = 1; // 设置状态为驳回
				this.updateApprovalStatus();
			},

			handleApprove() {
				this.buttonLoadings = true;
				this.formData.status = 0; // 设置状态为同意
				this.updateApprovalStatus();
			},

			updateApprovalStatus() {
				updateApprovalStatusOptions(this.formData)
					.then(() => {
						toast('处理成功');
						this.buttonLoading = false;
						this.buttonLoadings = false;
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/work/approvalmanagement`
							});
						}, 1000);
					})
					.catch(err => {
						toast(err.msg);
						this.buttonLoading = false;
						this.buttonLoadings = false;
						console.error(err);
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/work/approvalmanagement`
							});
						}, 1000);
					});
			}
		},

		computed: {
			maskedIdCard() {
				const idCard = this.formData.applyIdCard;
				return idCard ? idCard.replace(/^(\d{6})\d+(\d{4})$/, '$1********$2') : '';
			},

			getGenderFromIdCard() {
				const idCard = this.formData.applyIdCard;
				if (!idCard || idCard.length < 18) return '未知';
				const secondLastDigit = parseInt(idCard.charAt(idCard.length - 2), 10);
				return secondLastDigit % 2 === 0 ? '女' : '男';
			}
		}
	};
</script>


<style lang="scss" scoped>
	.borderDiv {
		background-color: #fff;
		margin: 32rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		overflow: hidden;
	}



	.remaining-chars {
		position: absolute;
		bottom: 36rpx;
		right: 60rpx;
		color: #e5e5e5;
	}

	.textBack {
		width: 100%;
		margin: 0 30rpx;

		.textarea {
			width: 430rpx;
			background-color: rgba(245, 245, 245, 1);
			border-radius: 15rpx;
			margin-bottom: 30rpx;
			height: 200rpx;
			padding: 15rpx;
			font-size: 25rpx;
		}
	}

	::v-deep .uni-forms {
		padding: 32rpx;
		background-color: #fff;

	}

	.uni-forms-item {
		margin: 40rpx 0;
	}

	::v-deep .uni-forms-item__label[data-v-61dfc0d0] {
		color: #666666;

	}

	::v-deep .uni-forms-item__content[data-v-61dfc0d0] {
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	::v-deep .uni-forms-item {
		margin-bottom: 0;
	}

	.icon {
		width: 20px;
		height: 20px;
	}

	.button1 {
		border-radius: 46rpx;
		background: #fff;
		color: rgba(189, 26, 45, 1);
		font-size: 32rpx;
		border: 1px solid rgba(189, 26, 45, 1);
	}

	.line-bottom {
		border-bottom: 0.6px solid #E5E5E5;
		margin: 16rpx 0;
	}

	.agree {
		padding: 32rpx;
		// margin-top: 16rpx;

		.left {
			width: 52rpx;
		}

		.right {
			.text {
				font-size: 12px;
				color: rgba(189, 26, 45, 1);
			}
		}
	}
</style>